<!--  -->
<template>
  <div class="about">
    <div class="infor">
      <img src="../assets/images/bluebg.png" width="100%" class="bluebg">
      <div class="tip">[ 以下信息必须如实填写 ]</div>
      <div class="infor_item">
        <el-input v-model="name" placeholder="请输入姓名"></el-input>
        <img src="../assets/images/name.png" class="titleimg" height="30px">
      </div>
      <div class="infor_item">
        <el-input v-model="phone" placeholder="请输入手机号"></el-input>
        <img src="../assets/images/phone.png" class="titleimg" height="30px">
      </div>
      <div class="infor_item">
        <el-select v-model="groupname" placeholder="请选择队伍名称">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <img src="../assets/images/groupname.png" class="titleimg" height="30px">
      </div>
      <div class="start_button" @click="toexam">
        <img src="../assets/images/startexam.png" width="50%" class="start_exam">
        <img src="../assets/images/fz.png" width="20px" class="fz">
      </div>
      <div class="info_title">
        <img src="../assets/images/infotitle.png" width="200px">
      </div>
      <img src="../assets/images/cloud.png" class="cloud">
      <img src="../assets/images/square.png" class="square">
    </div>
  </div>
</template>

<script>
  import {
    post
  } from '../assets/utils/axiosRequest'
  export default {
    data() {
      return {
        name: "",
        phone: "",
        groupname: "",
        options: [{
            value: '江阴队',
            label: '江阴队'
          }, {
            value: '宜兴队',
            label: '宜兴队'
          }, {
            value: '梁溪队',
            label: '梁溪队'
          }, {
            value: '锡山队',
            label: '锡山队'
          }, {
            value: '惠山队',
            label: '惠山队'
          }, {
            value: '滨湖队',
            label: '滨湖队'
          }, {
            value: '新吴队',
            label: '新吴队'
          },
          {
            value: '经开队',
            label: '经开队'
          }, {
            value: '中心队',
            label: '中心队'
          }, {
            value: '其他',
            label: '其他'
          }
        ],
      };
    },

    methods: {
      toexam() {
        if (this.name != "" && this.phone != "" && this.groupname != "") {
          this.$store.state.nickName = this.name
          localStorage.setItem("nickName", this.name)
          let data = new FormData();
          var userIdentify = localStorage.getItem("WZTLUNIONID")
          data.append('username', this.name);
          data.append('mobile', this.phone);
          data.append('dept', this.groupname);
          data.append('userIdentify', userIdentify);
          localStorage.setItem("ifregister", true)
          post("/gt-contest/contest/saveUser", data)
            .then(res => {
              this.$router.push({
                path: "/exam"
              })
            })

        } else {
          this.$message({
            showClose: true,
            message: '请填写基本信息',
            type: 'error'
          });
        }
      },
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped lang="less">
  .about {
    width: 100%;
    height: 100%;
    background: url('../assets/images/bg.png');
    background-size: 100% 100%;

    /deep/ .el-input__inner {
      background: #ffffff00 !important;
      border: 0;
    }

    .cloud {
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 2;
    }

    .bluebg {
      z-index: 2;
    }

    .infor {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: white;
      position: relative;
      top: 100px;

      .square {
        position: absolute;
        top: -30px;
        width: calc(100% + 50px);
        z-index: 1;
      }

      .info_title {
        position: absolute;
        top: -35px;
        z-index: 2;
      }



      .tip {
        margin: 10px 0;
      }

      .start_button {
        position: relative;
        z-index: 3;
        margin-bottom: 200px;

        .fz {
          position: absolute;
          right: 60px;
          top: -10px;
          width: 50px;
        }
      }

      .infor_item {
        position: relative;
        background: rgba(235, 235, 235);
        padding: 20px 50px;
        border-radius: 5px;
        margin: 20px 0;
        z-index: 3;

        .titleimg {
          position: absolute;
          top: -15px;
          left: 50%;
          transform: translate(-50%);
        }
      }

      .start_exam {}
    }
  }
</style>